<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="简介">
    <meta name="keywords" content="关键字">
    <meta name="author" content="作者">
    <title></title>
    <link href="accessible-color.css" type="text/css" rel="stylesheet">
</head>

<body>
    <button class="btn">我是按钮</button>
    <p>拖动滑块，改变RGB变量：</p>
    <p>R：<input type="range" min="0" max="255" value="44" name="red"></p>
    <p>G：<input type="range" min="0" max="255" value="135" name="green"></p>
    <p>B：<input type="range" min="0" max="255" value="255" name="blue"></p>
    <script type="text/javascript">
    var eleRanges = document.querySelectorAll('input[type="range"]');
    Array.from(eleRanges).forEach(function(range)
    {
        range.addEventListener('input', function()
        {
            document.documentElement.style.setProperty('--' + this.name, this.value);
        });
    });
    </script>
</body>

</html>